<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!--    引入首页样式-->
    <link href="indexCss.css" rel="stylesheet" type="text/css">
    <style>
        section{
            padding: 100px;
        }

    </style>
</head>
<body>



<!--正文在这里继续-->
<!--管理员登录-->
<section class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" style="color:#000;text-align: center">
            <h1>中交兴路期待您的加入</h1>
        </div>
    </div>
    <div  class="alert alert-danger"
          v-show="hasError">
        <i class="fa fa-exclamation-triangle"></i>
        <span v-text="message">格式错误！</span>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-6 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">注册</div>
                <div class="panel-body" style="color:#000;">

                    <form @submit.prevent="register" class="form-horizontal" id="fform">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" >用户名 *</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="username" pattern="^.{2,20}$" placeholder="2~20个字符(字母、数字、_ 、$)"  required="required"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码 *</label>
                            <div class="col-sm-10">
                                <input  :type="eye1" class="form-control" name="password" pattern="^\w{5,20}$" placeholder="请输入密码"
                                       required="required">
                                <a @click="showeye1" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye" style="position: absolute;right: 25px;top:7px" v-show="eye1=='password'"></i></a>
                                <a @click="showeye1" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye-slash" style="position: absolute;right: 25px;top:7px" v-show="eye1=='text'"></i></a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">确认密码*</label>
                            <div class="col-sm-10">
                                <input  :type="eye2" class="form-control" name="confirm" placeholder="确认密码"
                                       required="required">
                                <a @click="showeye2" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye" style="position: absolute;right: 25px;top:7px" v-show="eye2=='password'"></i></a>
                                <a @click="showeye2" href="javascript:;" style="color:#000;"><i aria-hidden="true" class="fa fa-eye-slash" style="position: absolute;right: 25px;top:7px" v-show="eye2=='text'"></i></a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">昵称 *</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="nick" pattern="^.{2,20}$" placeholder="以便后续展示 2~20个字符(字母、数字、_ 、$)" required="required"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号 *</label>
                            <div class="col-sm-10">
                                <input class="form-control" name="phone" pattern="^\1d{10}$"
                                       placeholder="请输入手机号" required="required" type="text">
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-4">
                                <button class="btn btn-default" type="submit">确认注册</button>
                            </div>
                            <div class="col-sm-offset-2 col-sm-4">
                                <span style="float: right;margin-top: 10px">已有账号，立即<a href="/login.html" style="color: #007ffe" >登录</a></span>
                            </div>
                        </div>
                        <div class="form-group">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
>
<!--引入瀑布流相关js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"section"
        ,data:{
            hasError:false,
            message:"",
            eye1:"password",
            eye2:"password",
            show1:false,
            show2:false,
            show3:false,
        },
        created:function (){
            if(location.search.split("?")[1] == "error"){
                 v.show1 = true;
                alert("show1==true")
            }else if(location.search.split("?")[1] == "logout"){
                v.show2 = true;
                alert("show2==true")
            }else if(location.search.split("?")[1] == "register"){
                v.show3 = true;
                alert("show3==true")
            }

        }
        ,methods: {

            showeye1: function () {
                if (v.eye1 == "password") {
                    v.eye1 = "text";
                } else {
                    v.eye1 = "password"
                }
            },
            showeye2: function () {
                if (v.eye2 == "password") {
                    v.eye2 = "text";
                } else {
                    v.eye2 = "password"
                }
            },
            register: function () {
                console.log('Submit');
                let form = new FormData(document.getElementById("fform"));
                if (form.get('password') != form.get('confirm')) {
                    v.message = "确认密码不一致！";
                    v.hasError = true;
                    return;
                }else {
                    v.hasError = false;
                }
                axios({
                    method: 'post',
                    url: '/mall/register',
                    data: form
                })
                    .then(function (r) {
                        if (r.data == "ok") {
                            console.log("注册成功");
                            console.log(r.data);
                            v.hasError = false;
                            location.href = '/login.html?register';
                        } else {
                            console.log(r.data);
                            v.hasError = true;
                            v.message = r.data;
                        }
                    });
            }
        }
    })
</script>

</body>
</html>